<template>
<div>
<div class="container">
<div class="binding-phone">
 <div class="item"><span class="item-tip">手机号码：</span><input type="text" placeholder="请输入手机号码"></div>
 <div class="item"><span class="item-tip">验证码</span><input type="text" placeholder="请输入验证码"><span class="get-code gray">获取验证码</span></div>
</div>
<div class="btn-box">
<span class="sure-btn gray">确定</span>
</div>
</div>  
</div>
</template>

<script>
export default {

}
</script>

<style scoped>
.container {
    height: 100%;
    box-sizing: border-box;
    color: #333;
    font-family: helvetica,'Heiti SC',PingFangSC-Light;
}
.binding-phone {
    height: 100%;
    margin-top: 20rpx;
    background: #fff;
}
.btn-box {
    padding: 0 20rpx;
    margin-top: 60rpx;
}
.binding-phone .item {
    display: flex;
    padding: 20rpx 0;
    height: 60rpx;
    line-height: 60rpx;
    border-bottom: 2rpx solid #e1e1e1;
}
.binding-phone .item .item-tip {
    width: 140rpx;
    font-size: 28rpx;
    padding-left: 20rpx;
}
.binding-phone .item input {
    flex: 1;
    height: auto;
    padding: 0 20rpx;
    font-size: 28rpx;
}
input {
    cursor: auto;
    display: block;
    height: 1.4rem;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    font-family: UICTFontTextStyleBody;
    min-height: 1.4rem;
}
.binding-phone .item:last-child {
    border: none;
}
.binding-phone .item .get-code.gray {
    color: #3eb370;
}
.binding-phone .item .get-code {
    font-size: 30rpx;
    color: #999;
    margin-right: 20rpx;
    text-align: center;
}
.btn-box {
    padding: 0 20rpx;
    margin-top: 60rpx;
}
.btn-box .sure-btn.gray {
    background: #e1e1e1;
    margin-bottom: 30rpx;
}
.btn-box .sure-btn {
    display: block;
    font-size: 32rpx;
    color: #fff;
    background: #3eb370;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 50rpx;
}
</style>